<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select
        v-model="listQuery.channelId"
        filterable
        :filter-method="dataFilter"
        placeholder="选择渠道"
        style="width: 150px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      >
        <el-option v-for="item in options" :key="item.channelId" :label="item.channel_name" :value="item.channelId" />
      </el-select>


      <!-- <el-select
        v-model="listQuery.platformId"
        filterable
        :filter-method="platformdataFilter"
        placeholder="选择平台"
        style="width: 150px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      >
        <el-option v-for="item in platformoptions" :key="item.id" :label="item.platformName" :value="item.id" />
      </el-select> -->

      <el-date-picker
        v-model="times"
        class="filter-item"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        style="width: 250px;"
        type="daterange"
        value-format="yyyy-MM-dd"
      />

      <!-- <el-input v-model="listQuery.appName" placeholder="名称" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" /> -->
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
      <!-- <el-button class="filter-item" style="margin-left: 10px;" type="success" icon="el-icon-plus" @click="handleCreate">
        新增
      </el-button> -->
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="tableData"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="日期" prop="id" align="center" width="120">
        <template slot-scope="{row}">
          <span>{{ row.datetime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="渠道" class-name="status-col" width="200">
        <template slot-scope="{row}">
          <span>{{ row.nickname }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="平台" class-name="status-col" width="200">
        <template slot-scope="{row}">
          <span>{{ row.platformName }}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="前筛(通过/被拒)" class-name="status-col" width="100">
        <template slot-scope="{row}">
          <span>{{ row.previousstate }} / {{ row.previousstateshibai }}</span>
        </template>
      </el-table-column>
      <el-table-column label="前筛通过率" class-name="status-col" width="100">
        <template slot-scope="{row}">
          <span>{{ row.passingRateOfFrontScreen }}</span>
        </template>
      </el-table-column>
      <el-table-column label="准入（通过/被拒）" class-name="status-col" width="100">
        <template slot-scope="{row}">
          <span>{{ row.pungstate }} / {{ row.pungstateshibai }}</span>
        </template>
      </el-table-column>
      <el-table-column label="准入通过率" class-name="status-col" width="100">
        <template slot-scope="{row}">
          <span>{{ row.accessRate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="申请授信(成功/失败)" class-name="status-col" width="100">
        <template slot-scope="{row}">
          <span>{{ row.statusapply }} / {{ row.statusapplyshibai }}</span>
        </template>
      </el-table-column>
      <el-table-column label="申请授信率" class-name="status-col" width="100">
        <template slot-scope="{row}">
          <span>{{ row.creditApplyRate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="授信(成功/失败)" class-name="status-col" width="100">
        <template slot-scope="{row}">
          <span>{{ row.reviewstate }} / {{ row.reviewstateshibai }}</span>
        </template>
      </el-table-column>
      <el-table-column label="授信成功率" class-name="status-col" width="100">
        <template slot-scope="{row}">
          <span>{{ row.creditSuccessRate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="绑卡(通过/失败)" class-name="status-col" width="100">
        <template slot-scope="{row}">
          <span>{{ row.bindcardstate }} / {{ row.bindcardstateshibai }}</span>
        </template>
      </el-table-column>
      <el-table-column label="绑卡通过率" class-name="status-col" width="100">
        <template slot-scope="{row}">
          <span>{{ row.passRateOfCardBinding }}</span>
        </template>
      </el-table-column>
      <el-table-column label="获取要款(通过/失败)" class-name="status-col" width="100">
        <template slot-scope="{row}">
          <span>{{ row.statusgetloan }} / {{ row.statusgetloanshibai }}</span>
        </template>
      </el-table-column>
      <el-table-column label="获取要款率" class-name="status-col" width="100">
        <template slot-scope="{row}">
          <span>{{ row.gettheMoney }}</span>
        </template>
      </el-table-column>
      <el-table-column label="放款审核(通过/被拒)" class-name="status-col" width="100">
        <template slot-scope="{row}">
          <span>{{ row.sreviewstatus }} / {{ row.sreviewstatusshibai }}</span>
        </template>
      </el-table-column>
      <el-table-column label="放款审核通过率" class-name="status-col" width="100">
        <template slot-scope="{row}">
          <span>{{ row.loanApprovalRate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="放款(成功/失败)" class-name="status-col" width="100">
        <template slot-scope="{row}">
          <span>{{ row.planstatus }} / {{ row.planstatusshibai }}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="放款成功率" class-name="status-col" width="100">
        <template slot-scope="{row}">
          <span>{{ row.loanSuccessRate }}</span>
        </template>
      </el-table-column>



      <!-- <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button v-if="row.state === 1" type="danger" size="mini" @click="updateState(row)">
            禁用
          </el-button>
          <el-button v-if="row.state === 0" type="success" size="mini" @click="updateState(row)">
            启用
          </el-button>
          <el-button type="primary" size="mini" @click="handleUpdate(row)">
            编辑
          </el-button>
        </template>
      </el-table-column> -->
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="loanList"
    />
  </div>
</template>

<script>
import { statisticsProductsByDay } from '@/api/apiloan'
import waves from '@/directive/waves' // waves directive
import { getChannelIdAndNick, getplatformIdAndNick } from '@/api/user'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
export default {
  name: 'ProcessCountPlatformChannel',
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      options: [],
      times: [],
      optionsCopy: [],
      platformoptions: [],
      platformoptionsCopy: [],
      limitNum: 1,
      tableData: [],
      total: 1,
      tableKey: 0,
      listQuery: {
        current: 1,
        size: 10,
        sysLabel: '',
        channelId: null
      },
      downloadLoading: false,
      listLoading: false
    }
  },
  created() {
    this.loanList(this.listQuery)
    this.getChannelIdAndNick()
    this.getplatformIdAndNick()
  },
  methods: {
    // 渠道下拉
    async getChannelIdAndNick() {
      const res = await getChannelIdAndNick(this.listQuery)
      res.data.data.forEach(element => {
        if (element.channel_name !== null) {
          this.optionsCopy.push(element)
          this.options.push(element)
        }
      })
    },
    dataFilter(val) {
      this.value = val
      if (val) { // val存在
        this.options = this.optionsCopy.filter((item) => {
          console.log(item)
          if (!!~item.channel_name.indexOf(val) || !!~item.channel_name.toUpperCase().indexOf(val.toUpperCase())) {
            return true
          }
        })
      } else { // val为空时，还原数组
        this.options = this.optionsCopy
      }
    },
    h5Formatter(row, col) {
      // console.log(row.h5)
      return row.h5.size
    },
    // 获取列表
    async loanList() {
      const res = await statisticsProductsByDay(this.listQuery)
      this.tableData = res.data.data.records
      this.total = res.data.data.total
    },
    handleFilter() {
      if (this.times == null) {
        this.listQuery.registerDateEnd = ''
        this.listQuery.registerDateStart = ''
      } else if (this.times.length === 0) {
        this.listQuery.registerDateEnd = ''
        this.listQuery.registerDateStart = ''
      } else {
        this.listQuery.registerDateEnd = this.times[1]
        this.listQuery.registerDateStart = this.times[0]
      }
      this.listQuery.current = 1
      this.loanList()
    },
    cancel() {
      this.dialogFormVisible = false
      this.loanList()
    },
    getSortClass: function(key) {
      const sort = this.listQuery.sort
      return sort === `+${key}` ? 'ascending' : 'descending'
    },
    platformdataFilter(val) {
      this.value = val
      if (val) { // val存在
        this.platformoptions = this.platformoptionsCopy.filter((item) => {
          // console.log(item)
          if (!!~item.platformName.indexOf(val) || !!~item.platformName.toUpperCase().indexOf(val.toUpperCase())) {
            return true
          }
        })
      } else { // val为空时，还原数组
        this.platformoptions = this.platformoptionsCopy
      }
    }, // 平台下拉
    async getplatformIdAndNick() {
      const res = await getplatformIdAndNick(this.listQuery)
      res.data.data.forEach(element => {
        if (element.platformName !== null) {
          this.platformoptionsCopy.push(element)
          this.platformoptions.push(element)
        }
      })
    }
  }
}
</script>

<style scoped>
</style>
